@inherits RenderViewPage
@using Umbraco.Cms.Web;
<link href="http://cdn.pbdesk.com/skins/rambling/slider.css" rel="stylesheet" type="text/css" />     
<script type="text/javascript" src="http://cdn.pbdesk.com/plugins/easingpack/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="http://cdn.pbdesk.com/plugins/easingpack/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="http://cdn.pbdesk.com/scripts/coda-slider.1.1.1.pack.js"></script>    
	<script type="text/javascript">
  
	var theInt = null;
	var $crosslink, $navthumb;
	var curclicked = 0;
	
	theInterval = function(cur){
	  clearInterval(theInt);
	  
	  if( typeof cur != 'undefined' )
		curclicked = cur;
	  
	  $crosslink.removeClass("active-thumb");
	  $navthumb.eq(curclicked).parent().addClass("active-thumb");
		$(".stripNav ul li a").eq(curclicked).trigger('click');
	  
	  theInt = setInterval(function(){
		$crosslink.removeClass("active-thumb");
		$navthumb.eq(curclicked).parent().addClass("active-thumb");
		$(".stripNav ul li a").eq(curclicked).trigger('click');
		curclicked++;
		if( 5 == curclicked )
		  curclicked = 0;
		
	  }, 4000);
	};
	
	$(function(){
	  
	  $("#main-photo-slider").codaSlider();
	  
	  $navthumb = $(".nav-thumb");
	  $crosslink = $(".cross-link");
	  
	  $navthumb
	  .click(function() {
		var $this = $(this);
		theInterval($this.parent().attr('href').slice(1) - 1);
		return false;
	  });
	  
	  theInterval();
	});
  </script>
<div class="portfolio_preview">
	<h2>My Realm</h2>
	<div id="from_portfolio">
		<div class="slider-wrap">
			<div id="main-photo-slider" class="csw">
				<div class="panelContainer">
					<div title="Panel 1" class="panel">
						<img src="http://cdn.pbdesk.com/images/slider/WelCome.png" alt="temp" width="501" height="158" />
						<div class="photo-meta-data">My WebSites:<br /> <span>www.PBDesk.com | blog.PBDesk.com | lms.PBDesk.com</span> </div>
					</div>
					<div title="Panel 2" class="panel">
						<img src="http://cdn.pbdesk.com/images/slider/MyBlogs.png" alt="temp" width="501" height="158" />
						<div class="photo-meta-data">Pinal Bhatt"s Blog - Learning endeavor for ever.....<br /> <span>http://blog.PBDesk.com</span></div>
					</div>
					<div title="Panel 3" class="panel">
						<img src="http://cdn.pbdesk.com/images/slider/MySocials.png" alt="scotch egg" width="501" height="158" />
						<div class="photo-meta-data">Find me on following social networks!<br /> <span>Facebook, Twitter, Google, Yahoo, LinkedIN... and many more</span></div>
					</div>
					<div title="Panel 4" class="panel">
						<img src="http://cdn.pbdesk.com/images/slider/LmsSlider.png" alt="scotch egg" width="501" height="158" />
						<div class="photo-meta-data">PBDesk || LMS ||<br /> <span>Blened Learning Pathway...An eLearning Portal.</span></div>
					</div>			  
				</div>
			</div>
			<div id="movers-row"></div>
		</div>
	</div>
</div>